<template>
<div>
    <ul>
        <li v-for="item in list">
        <p>姓名：{{ item.name }}</p>
        <p>年龄{{ item.age }}</p>
        </li>
    </ul>
    <table border="1" style="border-collapse: collapse;">
        <tr style="background-color: aqua;">
            <td>用户借款编号</td>
            <td>借款用户账号</td>
            <td>借款款项名称</td>
            <td>借款金额</td>
            <td>剩余还款本金</td>
        </tr>
        <tr v-for="item in blist">
            <td>{{ item.id }}</td>
            <td>{{item.userName}}</td>
            <td>{{item.name}}</td>
            <td>{{item.money}}</td>
            <td>{{item.bmoney}}</td>
        </tr>
    </table>
    <input type="text" v-model="s" />
    <p>{{ s }}</p>
</div>
</template>

<script setup lang="ts">
import {reactive,ref,toRefs} from 'vue'
const s=ref("双向数据绑定演示")
let data=reactive({
    list:[
    {name:'张大',age:21},
    {name:'李尔',age:20},
    {name:'刘珊',age:22},
    {name:'钱嗣',age:25},
    {name:'赵武',age:24},
    ],
    blist:[
    {id:1,userName:'zhangsan',name:'八维助学金',money:400,bmoney:0},
    {id:2,userName:'zhangsan',name:'八维助学金',money:10000,bmoney:10000},
    ],
})
let {list,blist} =toRefs(data)
</script>

<style>
ul{
    list-style: none;
}
li{
    margin-bottom: 20px;
}
</style>